import { ref } from "vue";
import type { AvueFormOption } from "@smallwei/avue";
import { handleTree } from "@/utils/ruoyi";

function columnControl(props: string[], target: boolean) {
  const col: any = {};
  const res = { display: false };
  res.display = target;

  for (const key of props) {
    col[key] = res;
  }
  return col;
}

export default function () {
  const option: AvueFormOption = {
    menuBtn: false,
    labelWidth: 110,
    column: [
      {
        type: "tree",
        prop: "parentId",
        label: "上级菜单",
        span: 24,
        dicUrl: "/api/system/menu/list",
        props: {
          label: "menuName",
          value: "id",
        },
        dicFormatter: (resp: any) => {
          const data = {
            id: 0,
            menuName: "主类目",
            children: handleTree(resp, "id"),
          };
          return [data];
        },
      },
      {
        type: "select",
        prop: "menuType",
        label: "菜单类型",
        span: 24,
        dicData: [
          {
            label: "目录",
            value: "M",
          },
          {
            label: "菜单",
            value: "C",
          },
          {
            label: "按钮",
            value: "F",
          },
        ],
        control(val) {
          const arr = ["component", "perms", "query", "isCache"];
          const arr2 = ["icon", "isFrame", "path"];

          let res: any;
          if (val === "M") {
            res = {
              ...columnControl(arr, false),
              ...columnControl(arr2, true),
            };
          } else if (val === "C") {
            res = {
              ...columnControl(arr, true),
              ...columnControl(arr2, true),
            };
          } else if (val === "F") {
            res = columnControl([...arr, ...arr2], false);
          }
          return res;
        },
      },
      {
        prop: "icon",
        label: "菜单图标",
        span: 24,
        readonly: true,
        iconList: [
          {
            label: "基本图标",
            list: [
              {
                label: "菜单",
                value: "Menu",
              },
            ],
          },
        ],
      },
      {
        prop: "menuName",
        label: "菜单名称",
        rules: [
          {
            required: true,
            message: "请输入菜单名称",
          },
        ],
      },
      {
        type: "number",
        prop: "orderNum",
        label: "显示排序",
        placeholder: " ",
        rules: [
          {
            required: true,
            message: "请输入显示排序",
          },
        ],
      },
      {
        type: "select",
        prop: "isFrame",
        label: "是否外链",
        labelTip: "选择是外链则路由地址需要以`http(s)://`开头",
        dicData: [
          {
            label: "是",
            value: "0",
          },
          {
            label: "否",
            value: "1",
          },
        ],
      },
      {
        prop: "path",
        label: "路由地址",
        rules: [
          {
            required: true,
            message: "请输入路由地址",
          },
        ],
        labelTip: "访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头",
      },

      {
        prop: "component",
        label: "组件路径",
        labelTip: "访问的组件路径，如：`system/user/index`，默认在`views`目录下",
      },
      {
        prop: "perms",
        label: "权限字符串",
        labelTip: "控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)",
      },
      {
        prop: "query",
        label: "路由参数",
        labelTip: '访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`',
      },
      {
        type: "select",
        prop: "isCache",
        label: "是否缓存",
        labelTip: "选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致",
        dicData: [
          {
            label: "是",
            value: "0",
          },
          {
            label: "否",
            value: "1",
          },
        ],
      },
      {
        type: "select",
        prop: "visible",
        label: "显示状态",
        labelTip: "选择隐藏则路由将不会出现在侧边栏，但仍然可以访问",
        dicData: [
          {
            label: "显示",
            value: "0",
          },
          {
            label: "隐藏",
            value: "1",
          },
        ],
      },
      {
        type: "select",
        prop: "status",
        label: "菜单状态",
        labelTip: "选择停用则路由将不会出现在侧边栏，也不能被访问",
        dicUrl: "/api/system/dict/type/optionSelect/sys_status",
        props: {
          label: "dictLabel",
          value: "dictValue",
        },
      },
    ],
  };
  return ref(option);
}
